<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="input-column border-bottom-1px">
				<text class="title">获奖名称</text>
				<view class="input-item">
					<input class="padding-10" placeholder="请输入获奖名称" v-model="name" />
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">获奖时间</text>
				<view class="row space-between-algin">
					<picker mode="date" fields="day" v-model="date1" :start="startDate" :end="endDate"
						@change="bindDate1Change">
						<input class="padding-10" disabled="true" placeholder="请选择开始时间" :value="formatDates(date1)" />
					</picker>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">证书照片</text>
				<view class="row honor-image" @click="uploadImg">
					<image style="width: 100%;" v-if="image" :src="image"></image>
					<text class="image-none" v-else>+</text>
				</view>
			</view>
		</view>
		<view class="btn-row row">
			<button v-if="id" type="warn" class="btn-delete" @tap="remove">删除</button>
			<button type="primary" class="btn-save" :class="id ? 'width-55' : 'width-90'" @tap="register">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		formatDate,
		calCurrentYear
	} from '@/common/date';
	import uploadImage from '@/common/ossutil/uploadFile';
	export default {
		components: {},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				id: 0,
				resumeId: null,
				date1: null,
				name: null,
				image: ""
			};
		},
		onLoad(query) {
			console.log("query===", query);
			this.id = query.id;
			this.resumeId = query.resumeId;
			if (this.id) {
				this.getDetail();
			}
		},
		methods: {


			formatDates(time) {
				if (time == null || time === '') {
					return null;
				}
				let str = time.replace(/-/g, '/');
				let date = new Date(str);
				// return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				return formatDate(date, 'yyyy-MM-dd')
			},

			async getDetail() {
				let res = await this.$apis.getHonorDetail({
					id: this.id
				});
				if (res) {
					this.date1 = res.honorTime;
					this.name = res.honorName;
					this.image = res.honorImg;
				}
				console.log(res);
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 0;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			bindDate1Change: function(e) {
				console.log(e.target.value);
				this.date1 = e.target.value;
			},

			async register() {
				console.log(this.date1);
				if (!this.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入获奖名称'
					});
					return;
				}
				if (!this.date1) {
					uni.showToast({
						icon: 'none',
						title: '请选择获奖日期'
					});
					return;
				}
				if (!this.image) {
					uni.showToast({
						icon: 'none',
						title: '请上传荣誉证书'
					});
					return;
				}
				let expect = {
					id: null,
					honorTime: this.date1,
					honorName: this.name,
					honorImg: this.image,
					resumeId: this.resumeId
				};
				if (this.id && this.id != 0) {
					expect.id = this.id;
				}
				let res = await this.$apis.updateHonor(expect);
				if (res) {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			async remove() {
				let res = await this.$apis.deleteHonorById({
					id: this.id
				});
				if (res) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// 选择图片
			uploadImg() {
				let that = this;
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						console.log("url===",that.tmpImageUrl)
						that.uploadFile();
					}
				});
			},
			
			// 上传图片
			uploadFile() {
				uni.showLoading({
					title: '图片上传中'
				});
				let that = this;
				uploadImage(0, this.tmpImageUrl, 'job/user/', result => {
					console.log('图片上传结果：', result);
					that.image = result;
					uni.hideLoading();
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	input {
		width: 90%;
	}

	.input-group {
		border-radius: 10upx;
		margin-top: 10upx;
		overflow: hidden;
		padding-bottom: 120upx;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 10upx;
	}

	.input-row .title {
		width: 25%;
		padding: 20upx 0;
		padding-left: 20upx;
		line-height: 50upx;
	}

	.border-bottom-1px {
		position: relative;

		&::after {
			position: absolute;
			z-index: 1;
			right: 0;
			bottom: 0;
			left: 20upx;
			height: 1upx;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #e2e2e2;
		}
	}

	.header {
		display: flex;
		flex-direction: column;

		.tip {
			font-size: $uni-font-size-sm;
			color: $font-color-666;
			margin-left: 20upx;
		}
	}

	.head-img {
		margin-right: 15upx;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 50%;
		}
	}

	radio-group {
		margin-right: 10upx;
	}

	.radio {
		margin-left: 20upx;
	}

	.input-column {
		display: flex;
		flex-direction: column;
		background-color: $bgcolor_white;
		padding: 30upx 20upx 10upx 20upx;

		.title {
			margin-left: 10upx;
		}

		.input-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.picker {
			padding: 30upx 0;
			margin-left: 10upx;
			position: relative;

			picker {
				font-size: $uni-font-size-lg;
				width: 100%;
				position: absolute;
			}
		}

		.yzb-next {
			float: right;
			color: $font-color-999;
		}
	}

	.content {
		background: $bgcolor_white;
	}

	.honor-image {
		margin: 20upx;
	}

	.image-none {
		font-size: 40upx;
		border: 1upx solid #eee;
		color: #666;
		width: 200upx;
		height: 200upx;
		text-align: center;
		line-height: 200upx;
		border-radius: 10upx;
	}

	.btn-row {
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		padding: 20upx 0;
		background-color: #ffffff;
		width: 100%;
		box-sizing: border-box;

		.btn-delete {
			background-color: $bg-grey;
			height: 90upx;
			line-height: 90upx;
			font-size: $font-size-34;
			color: $font-color-333;
			width: 30%;
		}

		.btn-save {
			background-color: $main-color;
			height: 90upx;
			line-height: 90upx;
			font-size: $font-size-34;
		}

		.width-55 {
			width: 55%;
		}

		.width-90 {
			width: 90%;
		}
	}
</style>